<template>
  <div v-loading="loading" class="h-100 flex algin-center">
    <div v-if="isData" ref="chart" class="w-100 h-100" style="width: 100%; height: 100%" />
    <NullData v-else type="pie" />
  </div>
</template>
<script>
  import * as echarts from 'echarts'
  import { changeDecimal } from '@/utils/common'
  import commonMixin from './js/commonMixin'

  export default {
    mixins: [commonMixin],
    data() {
      return {
        isData: true,
        loading: false,
        total: 0
      }
    },
    computed: {},
    created() {
      this.$nextTick(() => {
        this.renderChart()
      })
    },
    methods: {
      renderChart() {
        this.isData = true
        this.statusChart && this.statusChart.clear()
        this.statusChart && this.statusChart.resize()
        const colorData =
          this.getTheme === 'dark-theme'
            ? { online: 'rgba(63, 248, 159, 1)', offline: 'rgba(157, 173, 172, 1)' }
            : { online: 'rgba(105, 231, 203, 1)', offline: 'rgba(223, 223, 223, 1)' }
        const onlineStatus = this.statisticsData.onlineStatus || {
          online: 0,
          offline: 0
        }
        if (!Object.values(onlineStatus).length) {
          this.isData = false
          this.statusChart = null
          return
        }
        const total = onlineStatus.offline + onlineStatus.online
        this.total = total
        const chartData = [
          {
            value: onlineStatus.online,
            name: this.$t('ONLINE'),
            percent: changeDecimal((onlineStatus.online * 100) / (total || 1), 2) + '%',
            itemStyle: {
              color: colorData.online
            }
          },
          {
            value: onlineStatus.offline,
            name: this.$t('OFFLINE'),
            percent: changeDecimal((onlineStatus.offline * 100) / (total || 1), 2) + '%',
            itemStyle: {
              color: colorData.offline
            }
          }
        ]
        const _this = this
        const option = {
          tooltip: {
            trigger: 'item',
            formatter: params => {
              const htmlStr = `<div class="flex align-start">
                <div class="flex align-center">${params.marker}<span>${params.name}</span></div>
                <div class="ml-10 text-left text-color">${params.value}<br>${params.data.percent}</div>
              </div>`
              return htmlStr
            },
            ..._this.tooltipOptions()
          },
          legend: {
            icon: 'roundRect',
            itemHeight: 10,
            itemWidth: 20,
            itemGap: 20,
            orient: 'vertical',
            top: 'center',
            left: '10',
            textStyle: {
              fontSize: _this.resetSize(12),
              color: _this.homeAxisText()
            },
            formatter(name) {
              const data = chartData.find(i => {
                return i.name === name
              })
              return name + '  ' + data.percent
            }
          },
          title: {
            ..._this.titleOption(),
            text: _this.$t('TOTAL_EQUIPMENT_COUNT'),
            subtext: total || '0'
          },
          series: [
            {
              name: '',
              type: 'pie',
              radius: ['40%', '70%'],
              center: ['70%', '50%'],
              // startAngle: 135,
              avoidLabelOverlap: false,
              showEmptyCircle: true,
              itemStyle: {
                borderWidth: 2,
                borderColor: _this.homeCardBg(),
                borderRadius: 3
              },
              label: {
                show: false
              },
              labelLine: {
                show: false
              },
              data: chartData
            }
          ]
        }

        this.$nextTick(() => {
          !this.statusChart && (this.statusChart = echarts.init(this.$refs.chart))
          this.statusChart.setOption(option)
        })
      }
    }
  }
</script>
<style lang="scss">
  .tooltip-class {
    background: red;
  }
</style>
./js/commonMixin
